<template>
	<view class="">
		<view class="module-title">联系人</view>
<!-- 		<view class="contact-list-r" v-if="info.phoneExternal">
			<view class="acea-row row-middle row-between pd-t-b-24">
				<view class="acea-row row-middle">
					<view class="name-img">{{info.contactExternal ? info.contactExternal.substring(0, 1) : '无'}}</view>
					<view class=" info">
						<view class="name">{{ info.contactExternal }}
							<text>{{info.phoneExternal ? (info.statusPhone == 1 ?info.phoneExternal:info.phoneExternal.replace(/(\d{3})\d*(\d{4})/,'$1****$2')):'暂无'}}</text>
						</view>
						<view class="identity">{{index==1?'房东':index==2?'老板':'员工'}}</view>
					</view>
				</view>
				<view class="acea-row row-middle icon">
					<view class="img-view" @click="toContactEx(info)">
						<image src="../../static/images/contact_01.png"></image>
					</view>
					<view class="img-view" @click="toPEx(info)">
						<image src="../../static/images/contact_02.png"></image>
					</view>
				</view>
			</view>
		</view> -->
		<view class="contact-list-r" >
			<view class="acea-row row-middle row-between pd-t-b-24" v-for="(item,index) in list" :key="item.id">
				<block v-if="item.open">
					<view class="acea-row row-middle">
						<view class="name-img">{{item.contactName ? item.contactName.substring(0, 1) : '无'}}</view>
						<view class=" info">
							<view class="name">{{ item.contactName }}
								<text>{{ item.contactPhone?( item.statusPhone ==1 ? item.contactPhone: item.contactPhone.replace(/(\d{3})\d*(\d{4})/,'$1****$2') ): '无' }}</text>
							</view>
							<view class="identity">{{item.contactType==1?'房东':item.contactType==2?'老板':'员工'}}</view>
						</view>
					</view>
					<view class="acea-row row-middle icon">
						<view class="img-view" @click="toContact(item)">
							<image src="../../static/images/contact_01.png"></image>
						</view>
						<view class="img-view" @click="toP(item)">
							<image src="../../static/images/contact_02.png"></image>
						</view>
					</view>
				</block>

			</view>

			<!-- 			<view class="acea-row row-middle row-between pd-t-b-24" v-if="info.phoneExternal">
				<view class="acea-row row-middle" >
					<view class="name-img">{{info.contactExternal ? info.contactExternal.substring(0, 1) : '无'}}</view>
					<view class=" info">
						<view class="name">{{ info.contactExternal }} <text>{{ info.phoneExternal ? info.phoneExternal.replace(/(\d{3})\d*(\d{4})/,'$1****$2') : '无' }}</text></view>
						<view class="identity">{{index==0?'老板':index==1?'房东':'员工'}}</view>
					</view>
				</view>
				<view class="acea-row row-middle icon">
					<view class="img-view" @click="toContact({contactPhone:info.phoneExternal,contactExternal:info.contactExternal})"><image src="../../static/images/contact_01.png"></image></view>
					<view class="img-view" @click="toP({contactPhone:info.phoneExternal,contactExternal:info.contactExternal})"><image src="../../static/images/contact_02.png"></image></view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		name: 'contactsList',
		props: {
			list: {
				type: Array,
				default: () => {
					return []
				}
			},
			info: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		data() {
			return {

			}
		},
		watch: {
			list: {
				handler() {
					console.log("list", this.list)
				},
				immediate: true,
				deep: true
			}
		},
		methods: {
			toContact(contact) {
				if (!contact || !contact.contactPhone) {
					this.$util.Tips({
						title: '未获取到联系人'
					})
					return;
				}
				getApp().globalData.into_singleChatRoom({
					phone: contact.contactPhone,
					contactId: contact.contactId,
					info: this.info ? this.info : ""
				})
			},
			toContactEx(contact) {
			
				if (!contact || !contact.phoneExternal) {
					this.$util.Tips({
						title: '未获取到联系人'
					})
					return;
				}
				getApp().globalData.into_singleChatRoom({
					phone: contact.phoneExternal,
					info: this.info ? this.info : "",
					nickname: contact.contactName,
				})
			},
			toPEx(contact) {
				if (contact.contacts[0].open == false) {
					console.log("滚蛋啊啊啊啊")
				}
				console.log(contact['phoneExternal'])
				this.$emit("toPhone")
				let type = this.info.id? 0 :(this.info.askrentId?1:2);
				let infoId = this.info.id || this.info.askrentId || this.info.buystoreId;
				let statusPhone = this.info.statusPhone;
				contact['phoneExternal'] ? getApp().globalData.toPhone(contact.phoneExternal, '', {
					statusPhone,
					infoId,
					type,
					storeCategory:this.info.storeCategory,
					open: contact.contacts[0].open,
					infoCity: this.info.city,
					contactName: contact.contacts[0].contactName,
				}) : null
			},
			toP(contact) {
				if (!contact || !contact.contactPhone) {
					this.$util.Tips({
						title: '未获取到联系人'
					})
					return;
				}
				this.$emit("toPhone")
				console.log(contact['contactPhone'])
				let type = this.info.id ? 0 : (this.info.askrentId ? 1 : 2);
				let infoId = this.info.id || this.info.askrentId || this.info.buystoreId;
				let statusPhone = this.info.statusPhone;
				contact['contactPhone'] ? getApp().globalData.toPhone(contact.contactPhone, '', {
					storeCategory: this.info.storeCategory,
					statusPhone,
					infoId,
					type,
					statusPhone: this.info.statusPhone,
					open: contact.open,
					infoCity: this.info.city,
					contactName: contact.contactName,
				}) : null
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pd-t-b-24 {
		padding: 18rpx 0;
	}

	.module-title {
		font-size: 36rpx;
		font-weight: 400;
		line-height: 42rpx;
		color: rgba(0, 0, 0, 1);
	}

	// 联系人
	.contact-list-r {
		margin-top: 20rpx;

		.info {
			margin-left: 24rpx;
		}

		.name-img {
			width: 76rpx;
			height: 76rpx;
			font-size: 36rpx;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			text-align: center;
			line-height: 76rpx;
			border-radius: 10rpx;
			background: rgba(238, 33, 45, 1);
		}

		.name {
			font-size: 32rpx;
			font-weight: 400;
			color: rgba(0, 0, 0, 1);

			text {
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 1);
			}
		}

		.identity {
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(166, 166, 166, 1);
			line-height: 36rpx;
		}

		.icon {
			.img-view {
				width: 66rpx;
				height: 66rpx;
				margin-left: 30rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>